import { useState } from "react";
import { Form, Input, Button, Image, message, Popconfirm } from "antd";
import SelectKnowledgeTree from "src/common/component/SelectKnowledgeTree";
import { httpPost } from "@utils/HttpUtil";
import { getPreviewUrl } from "@utils/WeStudyUtil";
import type { PopconfirmProps } from 'antd';

const FunctionManageKnowledge = () => {
  const [selectedNode, setSelectedNode] = useState(""); // 当前选中节点
  const [form] = Form.useForm(); // 表单控制实例

  const baseImgUrl = getPreviewUrl();

  // 节点选择回调
  const onSelect = (nodeId: any) => {
    if (!nodeId) {
      console.log("未选择节点");
      setSelectedNode("");
      form.resetFields();
      return;
    }
    setSelectedNode(nodeId);
    var knowledge = httpPost("/knowledge/getKnowledgeById", {
      id: nodeId,
    }).data;
    if (!knowledge) {
      return;
    }
    form.setFieldsValue({
      // 表单填充选中节点数据
      id: knowledge.id,
      name: knowledge.name,
      type: knowledge.type,
      pid: knowledge.pid,
      sort: knowledge.sort,
      color: knowledge.color,
      knowledgeImg: knowledge.content,
      deleted: knowledge.deleted,
    });
  };

  // 更新节点
  const handleUpdate = () => {
    form.validateFields().then((values) => {
        console.log(values);
        httpPost("/knowledge/updateKnowledge", values);
      message.success("知识点更新成功！");
    });
  };

  const confirm: PopconfirmProps['onConfirm'] = (e) => {
    httpPost("/knowledge/deleteKnowledge", {
      id: selectedNode,
    });
    message.success("知识点删除成功！"+selectedNode);
  };
  
  const cancel: PopconfirmProps['onCancel'] = (e) => {
    
  };

  const hideKnowledge = () => {
    httpPost("/knowledge/hideKnowledge", {
      id: selectedNode,
    });
    message.success("知识点已隐藏！");
  }

  const restoreKnowledge = () => {
    httpPost("/knowledge/restoreKnowledge", {
      id: selectedNode,
    });
    message.success("知识点已恢复！");
  }

  return (
    <div className="container">
      {/* 知识点选择区 */}
      <SelectKnowledgeTree
        onChange={(value: any) => {
          onSelect(value[0]);
        }}
      />

      {/* 知识点详情与编辑区 */}
      {selectedNode && (
        <>
          <Form form={form} onFinish={handleUpdate} style={{ marginTop: 20 }}>
            <Form.Item label="标识" name="id">
              <Input />
            </Form.Item>
            <Form.Item label="名称" name="name">
              <Input />
            </Form.Item>
            <Form.Item label="上级" name="pid">
              <Input />
            </Form.Item>
            <Form.Item label="颜色" name="color">
              <Input />
            </Form.Item>
            <Form.Item label="隐藏" name="deleted">
              <Input />
            </Form.Item>
            <Form.Item label="内容" name="knowledgeImg">
              <Input />
            </Form.Item>
            {form.getFieldValue("knowledgeImg") === null ? (
              <></>
            ) : (
              <Form.Item label="内容">
                <Image
                  src={baseImgUrl + form.getFieldValue("knowledgeImg")}
                  width={300}
                />
              </Form.Item>
            )}
            <Button
              type="primary"
              htmlType="submit"
              style={{ marginRight: 10 }}
            >
              更新知识点
            </Button>
            {/* <Button
              type="primary"
              onClick={hideKnowledge}
              style={{ marginRight: 10 }}
            >
              隐藏知识点
            </Button>
            <Button
              type="primary"
              onClick={restoreKnowledge}
              style={{ marginRight: 10 }}
            >
              恢复知识点
            </Button> */}
            <Popconfirm
              title="删除知识点"
              description="确定删除该知识点吗?"
              onConfirm={confirm}
              onCancel={cancel}
              okText="确定"
              cancelText="取消"
            >
              <Button danger>删除知识点</Button>
            </Popconfirm>
          </Form>
        </>
      )}
    </div>
  );
};

export default FunctionManageKnowledge;
